<template>
	<view class="container">
		<u-search class="search" placeholder="模糊查询" v-model="keyword" @search="searchData" @custom="searchData"></u-search>
		<view class="txt">
			<text>采样时间：{{sampleDate}}</text>
			<text>采样时长：{{sampleRunTime}}</text>
			<text>样品编号：{{sampleNo}}</text>
			<text>设定流速：{{setFlow}}</text>
			<text>泄漏结果：{{leakCheckResult}}</text>
		</view>
		<view class="charts-box">
			<qiun-data-charts :ontouch="true" type="line" :opts="opts" :chartData="chartData" />
		</view>
		<scroll-view scroll-y class="scroll" @scrolltolower="onreachBottom">
			<view class="table-box">
				<u-table>
					<u-tr class="u-tr">
						<u-th class="u-th">序号</u-th>
						<u-th class="u-th">时间</u-th>
						<u-th class="u-th">流速(mL/min)</u-th>
						<u-th class="u-th">压力({{unit}})</u-th>
					</u-tr>
					<u-tr class="u-tr" v-for="(item,index) in deviceData" :key="index">
						<u-td class="u-td">{{index+1}}</u-td>
						<u-td class="u-td">{{item.time}}</u-td>
						<u-td class="u-td">{{item.flow}}</u-td>
						<u-td class="u-td">{{item.press}}</u-td>
					</u-tr>
				</u-table>
			</view>
		</scroll-view>
		<view class="action-box">
			<u-icon name="share" color="blue" hover-class="button-hover" label="分享" @click="shareData"></u-icon>
			<u-icon name="close" color="red" label="删除"></u-icon>
			<u-icon name="eye" color="success" label="更多数据" @click="show = true"></u-icon>
			<text style="color: orangered;">数据总数：{{dataCount}}</text>
		</view>
	</view>
	<u-select v-model="show" :list="list"></u-select>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				dataCount: 100,
				keyword: '',
				unit: 'psig',
				deviceId: '',
				dataName: '',
				sampleDate: '',
				sampleRunTime: '',
				sampleNo: '',
				setFlow: null,
				leakCheckResult: '10202122Pass：(-13.1454)-(-13.1454)=(0.0000)',
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				deviceData: [{
						id: 1,
						time: 5,
						flow: 16.5,
						press: -13.5
					},
					{
						id: 2,
						time: 10,
						flow: 16.8,
						press: -12.5
					},
					{
						id: 2,
						time: 10,
						flow: 16.8,
						press: -12.5
					},
					{
						id: 2,
						time: 10,
						flow: 16.8,
						press: -12.5
					},
					{
						id: 2,
						time: 18,
						flow: 16.8,
						press: -12.5
					}
				],
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 10, 15],
					enableScroll: false,
					dataLabel: false,
					dataPointShape: false,
					xAxis: {
						disableGrid: true,
						boundaryGap: "justify",
					},
					yAxis: {
						gridType: "dash",
						showTitle: true,
						dashLength: 2,
						data: [{
								min: 15,
								max: 50,
								position: 'left',
								title: '流速(mL/min)',
								axisLineColor: "blue",
								titleFontSize: 10,
								titleOffsetY: -5,
								titleFontColor: "blue",
								tofix: 1
							},
							{
								min: 10,
								max: 56,
								position: 'right',
								title: '压力(psig)',
								xisLineColor: "#ff0000",
								titleFontSize: 10,
								titleOffsetY: -5,
								titleFontColor: "red",
								tofix: 1
							}
						]
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow"
						}
					}
				}
			}
		},
		mounted() {
			this.getServerData();
		},
		onLoad(option) {
			this.deviceID = option.deviceId;
			this.dataName = option.dataName;
			uni.setNavigationBarTitle({
				title: `设备数据-${this.deviceId}-${this.dataName}`
			});
		},
		methods: {
			searchData(){
				console.log('搜索')
			},
			onreachBottom() {
				console.log('到达底部')
				uni.showLoading({
					title: "数据加载中...",
					mask: true
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000);
			},
			shareData() {
				console.log('分享数据')
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
								name: "流速(mL/min)",
								index: 0,
								color: 'blue',
								data: [
									[5, 15.6],
									[10, 15.8],
									[15, 15.8],
									[20, 25.8],
									[25, 35.8],
									[30, 45.8],
									[35, 35.8],
									[40, 25.8],
									[45, 20.8]
								]
							},
							{
								name: "压力(psig)",
								index: 1,
								color: 'red',
								data: [
									[5, 10],
									[10, 20],
									[15, 35.8],
									[20, 45.8],
									[25, 55.8],
									[30, 45.8],
									[35, 35.8],
									[40, 25.8],
									[45, 10.8]
								]
							}
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style>
	.content {
		padding: 20rpx;
		/* border: solid 1rpx #55ff00; */
		margin-top: 80rpx;
	}

	.container {
		border: solid 1rpx red;
		height: calc(100vh - var(--window-top));
		display: flex;
		flex-direction: column;
	}

	.search {
		width: 100%;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.txt {
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
		margin-left: 20rpx;
		font-size: 20rpx;
	}

	.txt text {
		margin-top: 10rpx;
	}

	.scroll {
		overflow-y: auto;
		width: 100%;
	}

	.charts-box {
		margin-top: 10rpx;
		width: 100%;
		height: 500rpx;
	}

	.table-box {
		margin-left: 20rpx;
		width: 95%;
		/* border: solid 1rpx #55ff00; */
	}

	.action-box {
		margin-left: 20rpx;
		margin-bottom: 10rpx;
		height: 80rpx;
		/* 固定高度 */
		padding: 10px;
		width: 96%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>